<template>
  <div>
    <label class="el-form-item__label" :style="'width:'+option.labelWidth+'px'">{{option.label}}</label>
        <el-select
          v-model="label"
          size="small"
          :style="'width: calc(100% - '+ labelWidth +'px) !important'"
          @focus="_groupClick"
          ref="group"
          :placeholder="option.placeholder"
        >
          <el-option value="1">
            <div ref="groupTree">
              <el-tree
                :data="groupList"
                :props="defaultProps"
                accordion
                node-key="id"
                ref="tree"
                :auto-expand-parent="true"
                @node-click="handleNodeClick"
                :default-expanded-keys="expandAry"
              >
                <span
                  class="custom-tree-node"
                  slot-scope="{ node }"
                  style="width: 100%"
                >
                  <i v-if="node.icon===1" class="el-icon-menu"></i>
                  <i v-if="node.icon===2" class="el-icon-tickets"></i>
                  <i v-if="node.icon===3" class="el-icon-document"></i>
                  <span style="font-size:13px;">{{ node.label }}</span>
                </span>
              </el-tree>
            </div>
          </el-option>
        </el-select>
  </div>
</template>
<script>
export default {
  name: 'selectTree',
  props: {
    option: {
      default: () => {
        return {
          label: '',
          labelWidth: 0,
          placeholder: '',
          defaultId: '',
        }
      }
    },
    expandAry: {
      default: () => {
        return []
      }
    },
    data: {
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      defaultProps: {
        children: "children",
        label: "label"
      },
      labelWidth: 0,
      groupId: '',
      label: '',
      groupList: [],
      groupListTwo: [],
    }
  },
  methods: {
    _groupClick () {
      this.groupList = this.groupListTwo;
      this.$refs.groupTree.parentNode.style.height = "auto";
      this.$refs.groupTree.parentNode.style.padding = "0";
      this.$refs.groupTree.parentNode.classList = [];

      this.$refs.tree.setCurrentKey(this.groupId);
    },
    handleNodeClick (data) {
      if (data.id == this.groupId){
        return;
      }
      let oldValue = {
        id: this.groupId,
        label: this.label,
        value: this.value,
      }
      this.groupId = data.id;
      this.label = data.label;
      this.value = data.value;
      this.groupList = [];
      this.$refs.group.blur();
      let newValue = {
        id: this.groupId,
        label: this.label,
        value: this.value,
      }
      this.$emit('change', oldValue, newValue);
    },
    getLabelById (list, id) {
      if (!list || !list.length) {
        return;
      }
      let data = null;
      list.forEach(item => {
        if (item.id === id) {
          data = item;
        } else if (item.children && !data) {
          data = this.getLabelById(item.children, id);
        }
      })
      return data;
    }
  },
  created () {
    let selectData = this.getLabelById(this.data, this.option.defaultId);
    if (selectData){
      this.label = selectData.label;
      this.groupId = selectData.id;
      this.value = selectData.value;
    }
    this.groupListTwo = this.data;
    this.labelWidth = Number(this.option.labelWidth) + 10;
    if (!this.labelWidth){
      this.labelWidth = 0;
    }
  }
}
</script>
<style scoped>

</style>
<style>
.el-tree__empty-block {
  min-height: 35px !important;
}
</style>
